<template>
  <div class="beijing">
    <div class="cont">
      <div class="j_title">欢迎登录</div>
      <div class="j_indent">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item  prop="username">
            <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div  @click="submitForm('ruleForm')" class="j_button">提交</div>
    </div>
  </div>
</template>

<script>
import {getShopLists} from '../../api/index'
import {Message} from 'element-ui'
export default {
  data() {
    return {
      ruleForm: {
        password: '123456',
        username:'andmin'
      },
      rules: {
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "密码为 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        //   验证用户名是否合法
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "用户名为 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          getShopLists({
            username:this.ruleForm.username,
            password:this.ruleForm.password
          }).then(res=>{
            console.log(res)
            if(res.code==200){
              localStorage.setItem('token',res.data.token)
              this.$router.push({
                name:'index'
              })
            }
          })
        } else {
          Message.error('请输入正确的用户名或者密码')
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.beijing {
  width: 100%;
  height: 779px;
  background: url('../../assets/beijing.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  //登录
  .cont {
    width: 300px;
    height: 300px;
    // background: aquamarine;
    position: absolute;
    top: 30%;
    left: 40%;
    //标题
    .j_title {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 25px;
      color: white;
    }
    //账号
    .j_indent {
      width: 100%;
      height: 120px;
      // background: salmon;
    }
  }
}

.j_button{
  width: 100%;
  height: 40px;
  background: #3A62D7;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 20px;
}
</style>
